<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="数据资产估值系统">
    <link rel="stylesheet" href="/static/css/element.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <title>数据资产估值系统</title>
    <style>
        /* pass */
    </style>
</head>
<body>
<div id="app" style="height: 100%">
    <el-container style="height: 100%">
        <el-aside width="" style="background-color: rgb(238,241,246)">
            <el-menu :default-active="activeMenu" :default-openeds="['2', '3']" :collapse="isCollapse"
                     @select="handleSelect" @open="handleOpen" @close="handleClose">
                <el-menu-item index="home">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">主页</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </template>
                    <el-menu-item-group title="分组一">
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航三</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item @click="handleCollapse">
                    <i :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
                    <span slot="title">{{ isCollapse ? '展开' : '收起' }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>高依石</span>
            </el-header>

            <el-main>
                <router-view></router-view>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue first -->
<script src="/static/js/vue.js"></script>
<!-- import Vue Router -->
<script src="/static/js/vue-router.js"></script>
<!-- import Element JavaScript -->
<script src="/static/js/element.js"></script>
<!-- import Axios -->
<script src="/static/js/axios.js"></script>
<script>
    const Foo = Vue.component('async-example', function (resolve, reject) {
        axios
            .get('/pages/test1.html')
            .then(function (response) {
                resolve({
                    template: response.data
                })
            })
    })
    const Bar = {template: '<div>bar</div>'}

    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    }

    new Vue({
        el: '#app',
        data() {
            const item = {
                date: '2021-02-05',
                name: '高依石',
                address: '浙江省杭州市江干区四季青街道xxx'
            };
            return {
                tableData: Array(10).fill(item),
                isCollapse: false,
                activeMenu: '2-1'
            };
        },
        router,
        methods: {
            handleSelect(key, keyPath) {
                if (key === 'home') {
                    this.$router.push('foo')
                }
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            }
        }
    })
</script>
</html>